<template>
  <el-dialog title="附件管理" v-model="attachmentVisible" append-to-body>
    <file-upload ref="fileUploadRef" class="!px-0" :upload-file-data="attachmentFileData" drag :show-file-list="false"></file-upload>
    <el-table :data="attachmentList" class="page-table">
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column prop="fileName" label="文件名" align="center" show-overflow-tooltip />
      <el-table-column prop="formatFileSize" label="大小" align="center" width="80" />
      <el-table-column prop="createUser" label="新增用户" align="center" width="70" />
      <el-table-column prop="createTime" label="新增时间" align="center" width="160" />
      <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="handlePreviewAttachment(scope.row)">查看</el-button>
          <el-button link type="success" @click="handleDownloadAttachment(scope.row)">下载</el-button>
          <el-button link type="danger" @click="handleDeleteAttachment(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="attachmentVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { UploadFile } from 'element-plus';
import { UpLoadFileDataProps } from '@/components/FileUpload/types';
import { addAttachment, AttachmentQuery, AttachmentVO, delAttachment, listAttachment, ModuleType } from '@/api/common';
import { ComponentInternalInstance } from 'vue';
import FileUpload from '@/components/FileUpload/index.vue';

const props = withDefaults(defineProps<{
  moduleType: ModuleType
  idKey: string
}>(), {});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const attachmentFileData = reactive<UpLoadFileDataProps>({
  fileLists: [],
  disabled: false,
  fileType: [],
  fileSize: 50,
  showTip: false,
  limit: 1,
});
const fileUploadRef = ref<InstanceType<typeof FileUpload>>();

watch(() => attachmentFileData.fileLists, async (fileLists: UploadFile[]) => {
  const formData = new FormData();
  formData.append('file', fileLists[0].raw!);
  const params: AttachmentQuery = {
    moduleType: props.moduleType,
    dataId: current.value[props.idKey]
  };
  await addAttachment(params, formData);
  await getAttachmentList();
  fileUploadRef.value?.uploadRef?.handleRemove(fileLists[0]);
});
/** 获取附件列表 */
const attachmentList = ref<any[]>([]);
const getAttachmentList = async () => {
  const params: AttachmentQuery = {
    moduleType: props.moduleType,
    dataId: current.value[props.idKey]
  };
  const res = await listAttachment(params);
  attachmentList.value = res.data ?? res.rows;
};
/** 初始化 */
const attachmentVisible = ref<boolean>(false);
const current = ref<any>();
async function init<T>(row: T): Promise<void> {
  current.value = row;
  await getAttachmentList();
  attachmentVisible.value = true;
}
// 预览附件
const handlePreviewAttachment = (row: AttachmentVO) => {
  window.open(`${import.meta.env.VITE_PREVIEW}?url=` + encodeURIComponent(btoa(row.previewUrl as string)));
};
// 下载附件
const handleDownloadAttachment = (row: AttachmentVO) => {
  window.open(row.previewUrl as string, '_blank');
};
// 删除附件
const handleDeleteAttachment = (row: AttachmentVO) => {
  proxy?.$modal.confirm(`是否确认删除文件名为：${row.fileName} 的附件？`).then(async () => {
    await delAttachment(row.id);
    await getAttachmentList();
    proxy?.$modal.msgSuccess('删除成功');
  }).catch(() => { });
};

defineExpose({
  init
});
</script>
